<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<!--引入JQ和MD5资源-->
<!--<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<body>
<div>
    <shiro:notAuthenticated>
    <form action="/login" method="post" id="loginForm">
        账号：<input type="text" name="username"><br>
        密码：<input type="text" id="password">
             <input type="text" id="md5Password" name="password"><br>
        <input type="button" value="登录" id="loginBtn">
    </form>
    </shiro:notAuthenticated>
    <shiro:authenticated>
        <a href="/success">进入主页</a>
    </shiro:authenticated>
</div>
<div>
    <!--获取Model中的异常信息-->
    <span style="color: red">[[${errMsg}]]</span>
</div>
</body>
<script>
    $(function () {
        $("#loginBtn").bind("click", function () {
            // const v_password = $("#password").val()
            // $("#md5Password").val($.md5(v_password))
            // $("#loginForm").submit()
            $.get("/getRandomSalt","",function (data) {
                alert(data)
                // 获取用户输入明文密码
                const v_password = $("#password").val();
                // 将后端传过来的 使用MD5加密过的UUID盐 再次进行加密
                $("#md5Password").val($.md5(data+v_password))
                // 提交 明文密码+随机盐（MD5加密的UUID）==> 进行MD5加密 进入网络传输
                $("#loginForm").submit();
                // text 指明ajax得到的数据类型（会智能判断）
            },"text")
        })
    })
</script>
</html>